<template>
  <!-- div.cart
外层容器，代表整个“购物车”页面。
类名 cart 可以用于样式控制（对应 <style> 中的 .cart {}）。
✅ div.content
内容区域，展示文字 “购物车”。
类名 content 可以用于布局和滚动设置，比如将来可以放商品列表。
在样式中设置了：
flex: 1;：表示该区域会自动填充剩余空间。
overflow-y: auto;：当内容超出时允许垂直滚动。
✅ <Footer />
引入并使用了自定义组件 Footer.vue，即页面底部的导航栏。
这个组件是从 ../../components/Footer.vue 导入并在 components 中注册后使用的。


整个页面是一个纵向的 Flex 容器（flex-flow: column），分为两部分：
顶部内容区（.content）：显示“购物车”，可滚动。
底部导航栏（<Footer />）：固定在底部，不会随内容滚动而消失。-->
  <div class="cart">
    <div class="content">购物车</div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue";

export default {
  components: {
    Footer,
  },
};
</script>

<style lang='less' scoped>
.cart { 
  display: flex;//左右布局
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>